<template>
  <div class="onepage" ref="onepageRef">

    <div class="onepage-page ie-container--fluid">
      <div class="carousel">
        <a-carousel
          :style="{
            width: '100%',
            height: '100vh',
          }"
          v-model:current="active"
          @change="handleChange"
          animation-name="fade"
          indicator-type="never"
          show-arrow="never"
          :move-speed="1000"
          :auto-play="carouselProps"
          ref="carouselRef"
        >
          <a-carousel-item>
            <div class="image-parallax">
              <img src="/static/image/banner_01.jpg" alt="" :style="active === 1 ? parallaxStyle : {}">
            </div>
            <div class="ie-container">
              <div class="slogan">
                <h3>语洲坚持以客户为中心，<br>通过创新解决方案为客户创造价值</h3>
                <p>语洲基于移动互联网、人工智能、云计算、大数据、物联网等新兴技术为政务升级、企业数字化转型提供全周期解决方案，与客户一起实现业务的创新与转型</p>
              </div>
            </div>
          </a-carousel-item>

          <a-carousel-item>
            <div class="image-parallax">
              <img src="/static/image/banner_02.jpg" alt="" :style="active === 2 ? parallaxStyle : {}">
            </div>
            <div class="ie-container">
              <div class="slogan">
                <h3 style="margin-bottom: 24px;">开放、合作、共赢</h3>
                <p>语洲欢迎各界创领者一起成为合作伙伴共建生态联盟一起实现客户价值</p>
                <a-row class="statistic">
                  <a-col
                    v-for="(item, $index) in statistic"
                    :key="$index"
                    :sm="6"
                    :xs="12"
                  >
                    <div class="statistic-item">
                      <div class="th">{{ item.num }}<sup>+</sup></div>
                      <div class="td">{{ item.name }}</div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-carousel-item>

          <a-carousel-item>
            <div class="image-parallax">
              <img src="/static/image/banner_03.jpg" alt="" :style="active === 3 ? parallaxStyle : {}">
            </div>
            <div class="ie-container">
              <div class="slogan">
                <h3>联合品牌营销公司「鲸希互动」<br>助力提升企业市场运营效率</h3>
                <p>鲸希互动是集短视频营销（抖音种草、直播带货）、全球公关传播、品牌策略投放、品牌IP运营于一身的公司</p>
              </div>
            </div>
          </a-carousel-item>
        </a-carousel>

        <div class="indicator ie-container">
          <div class="indicator-controls">
            <div class="next">
              <a-progress
                type="circle"
                track-color="rgba(255,255,255,.2)"
                v-bind="progressProps"
                :stroke-width="3"
                :show-text="false"
                :animation="false"
              />
              <div class="circle" @click="slideTo">
                <icon-right size="16" />
              </div>
            </div>
            <div class="prev">
              <div class="circle">
                <icon-left size="16" @click="slideTo(1)" />
              </div>
            </div>
          </div>

          <div class="mouse-box">
            <span class="mouse" @click="scrollTo"></span>
          </div>
        </div>
      </div>
    </div>

    <div class="onepage-page ie-container--fluid">
      <el-image
        src="/static/image/background_01.jpg"
        style="width: 100%; height: 100%; position: absolute;"
        fit="cover"
        lazy
      />
      <div class="ie-container">
        <section>
          <div class="title">
            <h3>合作客户</h3>
            <p>客户的支持让我们不断前进</p>
          </div>
          <a-row :gutter="{ sm: 40, xs: 12 }">
            <a-col
              v-for="(item, $index) in partner"
              :key="$index"
              :sm="6"
              :xs="8"
            >
              <div class="partner">
                <div class="partner-box">
                  <el-image
                    :src="item"
                    style="width: 100%; max-width: 168px; max-height: 100%; vertical-align: middle;"
                    fit="contain"
                    lazy
                  />
                </div>
              </div>
            </a-col>
          </a-row>
        </section>
      </div>
    </div>

    <div class="onepage-page ie-container--fluid">
      <el-image
        src="/static/image/background_01.jpg"
        style="width: 100%; height: 100%; position: absolute;"
        fit="cover"
        lazy
      />
      <div class="ie-container">
        <section>
          <div class="title" :style="{ marginBottom: mq.mdMinus ? '50px' : '150px' }">
            <h3>解决方案</h3>
            <p>提供从方案设计到部署实施的一站式落地服务</p>
          </div>
          <a-row :gutter="80">
            <a-col :sm="12" :xs="24">
              <div class="case">
                <el-image
                  src="/static/image/case_01.jpg"
                  style="width: 100%; height: 100%; position: absolute;"
                  fit="cover"
                  lazy
                />
                <div class="case-box">
                  <h3>企业数智化转型</h3>
                  <p>聚焦数字化、智能化、数据分析、云技术、网络安全、监管合规</p>
                  <a-button @click="$router.push('/solution')">查看更多</a-button>
                </div>
              </div>
            </a-col>
            <a-col :sm="12" :xs="24">
              <div class="case">
                <el-image
                  src="/static/image/case_02.jpg"
                  style="width: 100%; height: 100%; position: absolute;"
                  fit="cover"
                  lazy
                />
                <div class="case-box">
                  <h3>智慧政务</h3>
                  <p>聚焦数字化、数据分析、云技术、网络安全、监管合规</p>
                  <a-button @click="$router.push('/solution')">查看更多</a-button>
                </div>
              </div>
            </a-col>
          </a-row>
        </section>
      </div>
    </div>

    <div class="onepage-page ie-container--fluid">
      <el-image
        src="/static/image/background_01.jpg"
        style="width: 100%; height: 100%; position: absolute;"
        fit="cover"
        lazy
      />
      <div class="ie-container">
        <section>
          <div class="title">
            <h3>智慧场景</h3>
            <p>提供从方案设计到部署实施的一站式落地服务</p>
          </div>
          <div class="case" style="height: 548px;">
            <el-image
              src="/static/image/case_03.jpg"
              style="width: 100%; height: 100%; position: absolute;"
              fit="cover"
              lazy
            />
            <div class="case-box">
              <p :style="{
                maxWidth: mq.mdMinus ? '100%' : '70%',
                margin: '0 auto 24px',
                textAlign: 'center'
              }">语洲科技将从基础架构、平台开发、硬件支持、系统集成、运维服务等方面为合作伙伴提供专业的行业解决方案，涵盖智慧政务、智慧文旅、智慧城市、智慧园区等各类智慧场景</p>
            </div>
          </div>
        </section>
      </div>
    </div>

    <div class="onepage-page ie-container--fluid">
      <el-image
        src="/static/image/background_01.jpg"
        style="width: 100%; height: 100%; position: absolute;"
        fit="cover"
        lazy
      />
      <div
        class="ie-container"
        :style="{
          height: mq.mdMinus ? 'calc(100% - 442px)' : 'calc(100% - 196px)'
        }"
      >
        <section>
          <h2>我们将您的大胆想法实现落地</h2>
          <a-button type="primary" size="large" @click="() => visible = true">
            联系我们
            <icon-right />
          </a-button>
        </section>
      </div>

      <a-modal
        v-model:visible="visible"
        @ok="() => visible = true"
        @cancel="() => visible = false"
        ok-text="提交"
        simple
      >
        <div>
          <a-form :model="formValue" layout="vertical">
            <a-form-item field="realname">
              <a-input v-model="formValue.realname" placeholder="姓名" />
            </a-form-item>
            <a-form-item field="phone">
              <a-input v-model="formValue.phone" placeholder="电话" />
            </a-form-item>
            <a-form-item field="company_name">
              <a-input v-model="formValue.company_name" placeholder="公司或组织名称" />
            </a-form-item>
            <a-form-item field="remark">
              <a-textarea
                v-model="formValue.remark"
                placeholder="填写您的合作意向，我们将尽快与您取得联系"
                :auto-size="{
                  minRows: 5,
                  maxRows: 5
                }"
                allow-clear
              />
            </a-form-item>
          </a-form>
        </div>
      </a-modal>

      <ie-footer />
    </div>

    <div class="onepage-indicator ie-container">
      <div class="bars">
        <span
          v-for="$index in 5"
          :class="{ active: onepageActive === ($index - 1) }"
          :key="$index"
        ></span>
      </div>
    </div>

  </div>
</template>

<script setup>
import { computed, ref, reactive, onMounted, watch } from 'vue'
import { TransitionPresets, useTransition, useParallax, useWindowSize, useScroll } from '@vueuse/core'
import { useMq } from 'vue3-mq'

const mq = useMq()

const duration = 10000
const colors = ['22,93,255', '0,180,42', '245,63,63']

const active = ref(1)
const carouselRef = ref()
const carouselProps = computed(() => {
  return {
    interval: duration,
    hoverToPause: false
  }
})

const percent = ref(0)
let percentAnimated = useTransition(percent, {
  duration,
  transition: TransitionPresets.easeInOutCubic
})
const progressProps = computed(() => {
  return {
    color: `rgb(${colors[percent.value % colors.length]})`,
    percent: percentAnimated.value % 1
  }
})

function handleChange(index, prev, isManual) {
  if (isManual) {
    // reset animate
    percentAnimated = useTransition(percent, {
      duration,
      transition: TransitionPresets.easeInOutCubic
    })
  }
  percent.value = percent.value + 1
}

function slideTo(isPrev = false) {
  if (carouselRef.value) {
    const $slideTo = carouselRef.value.slideTo || (() => {})
    const {
      mergedPrevIndex,
      mergedNextIndex
    } = carouselRef.value.mergedIndexes || {}

    $slideTo({
      targetIndex: Boolean(isPrev) ? mergedPrevIndex : mergedNextIndex,
      isNegative: false,
      isManual: true
    })
  }
}

const parallax = reactive(useParallax(carouselRef))
const parallaxStyle = computed(() => {
  return {
    transition: 'transform .3s ease-out',
    transform: `translateX(${parallax.tilt * -50}px) translateY(${
      parallax.roll * 50
    }px)`
  }
})

const { height } = useWindowSize()

const onepageRef = ref()
const onepageActive = ref(0)
const emit = defineEmits(['onepage:change'])

function scrollTo() {
  // 100vh - 100px(navbar)
  if (onepageRef.value?.scrollTo) {
    onepageRef.value.scrollTo({
      top: height.value,
      behavior: 'smooth'
    })
  }
}

onMounted(() => {
  // initialize circle progress
  handleChange()
  // emit page change
  const { y } = useScroll(onepageRef.value)

  watch(
    () => Math.ceil(y.value / height.value),
    idx => {
      onepageActive.value = idx
      emit('onepage:change', idx)
    }, { immediate: true })
})

const statistic = [
  { name: '行业经验', num: 6 },
  { name: '合作机构', num: 11 },
  { name: '服务客户', num: 24 },
  { name: '交付项目', num: 50 },
]

const partner = [
  '/static/image_o/partner/xiaomi.png',
  '/static/image_o/partner/tencent.png',
  '/static/image_o/partner/huawei.png',
  '/static/image_o/partner/inspur.png',
  '/static/image_o/partner/seeyon.png',
  '/static/image_o/partner/ccreate.png',
  '/static/image_o/partner/nomax.png',
]

const visible = ref(false)
const formInitValue = {
  realname: null,
  phone: null,
  company_name: null,
  remark: null
}
const formValue = ref({ ...formInitValue })
</script>

<style lang="less">
.onepage {
  height: 100vh;
  overflow: auto;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;

  &-page {
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;

    &:not(:first-child) {

      & > .ie-container {
        padding-top: 100px;
      }
    }

    & > .ie-container {
      height: 100%;
      text-align: center;

      &:before {
        content: '';
        display: inline-block;
        width: 0;
        height: 100%;
        vertical-align: middle;
      }

      section {
        width: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  &-indicator {
    position: fixed;
    height: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;

    .bars {
      position: absolute;
      top: 50vh;
      transform: translateY(-50%);
      margin-left: -200px;

      span {
        width: 36px;
        height: 2px;
        border-radius: 1px;
        margin: 20px 0;
        background-color: #7C8094;
        display: block;
        transition: all .3s cubic-bezier(.645,.045,.355,1);
      }

      .active {
        width: 64px;
        background-color: #165DFF;
      }
    }
  }
}

.carousel {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .image-parallax {
    position: absolute;
    top: -50px;
    bottom: -50px;
    left: -50px;
    right: -50px;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .ie-container {
    height: 100%;
    overflow: hidden;
    z-index: 100;

    &:before {
      content: '';
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .slogan {
    display: inline-block;
    vertical-align: middle;
    height: 300px;
    padding-right: 64px + 15px + 200px;

    h3 {
      color: #FFF;
      font-size: 48px;
      line-height: 1.5;
      margin-bottom: 48px;
    }

    p {
      opacity: 0.8;
      font-size: 18px;
      color: #FFF;
      line-height: 1.7;
    }
  }

  .indicator {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 9;
    transform: translateY(-50%);
    text-align: right;

    .arco-progress-circle-svg {
      transform: rotate(-180deg);
    }

    .arco-progress-circle-bar {
      transition-duration: .2s, .6s;
    }

    &-controls {
      display: inline-block;

      .next, .prev {
        width: 64px;
        height: 64px;
        position: relative;
      }

      .circle {
        position: absolute;
        top: 20px;
        left: 20px;
      }
    }

    .circle {
      width: 24px;
      height: 24px;
      border-radius: 12px;
      background-color: #FFF;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15);
      cursor: pointer;

      .arco-icon {
        margin: 4px;
      }
    }
    .mouse-box {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 25px;
      height: 38px;
      margin: 0 auto 60px;
      z-index: 99;

      .mouse {
        cursor: pointer;
      }
    }
  }

  .statistic {
    width: 100%;
    max-width: 550px;
    margin-top: 48px;

    &-item {
      color: #FFF;
      display: inline-block;
      text-align: center;
      margin-bottom: 24px;
    }

    .th {
      font-size: 48px;
      font-weight: bold;
    }

    .td {
      font-size: 14px;
      padding-top: 12px;
    }

    sup {
      top: 0;
      font-size: 90%;
      padding-left: 2px;
    }
  }
}

.ie-layout.mini {

  section {
    padding: 32px 0;

    .title {
      margin-bottom: 50px;
    }

    .partner {
      margin-bottom: 20px;
    }

    .case {
      height: 240px;
      margin-bottom: 20px;

      &-box {
        left: 25px;
        padding-right: 25px;
      }
    }

    h2 {
      font-size: 24px;
    }
  }

  .carousel {

    .slogan {
      padding-right: 84px;

      h3 {
        font-size: 32px;
      }

      p {
        font-size: 16px;
      }
    }
  }

  .onepage-page:not(:first-child) > .ie-container {
    padding-top: 80px;
  }
}
</style>

<style lang="less" scoped>
section {
  padding: 16px 0 96px;
  .title {
    text-align: center;
    margin-bottom: 70px;

    h3 {
      font-size: 32px;
      color: #272E3B;
      text-align: center;
      margin-bottom: 18px;
    }

    p {
      font-size: 16px;
      color: #7D7D7D;
    }
  }

  h2 {
    font-size: 32px;
    margin-bottom: 2.5em;
    color: #424242;
  }

  .partner {
    position: relative;
    margin-bottom: 40px;
    overflow: hidden;

    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 0;
      padding-top: 100%;
    }

    &-box {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(255,255,255,0.95);
      box-shadow: 12px 12px 40px 0 rgba(0,0,0,0.03);
      border-radius: 4px;
      text-align: center;

      &:before {
        content: '';
        width: 0;
        height: 100%;
        display: inline-block;
        vertical-align: middle;
      }
    }
  }

  .case {
    position: relative;
    text-align: left;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    &:before {
      content: '';
      position: absolute;
      top: 40%;
      left: 0;
      bottom: 0;
      right: 0;
      background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.80) 100%);
      z-index: 1;
    }

    &-box {
      position: absolute;
      bottom: 50px;
      left: 50px;
      padding-right: 50px;
      z-index: 9;

      h3 {
        font-size: 24px;
        color: #FFFFFF;
        margin-bottom: 8px;
      }

      p {
        opacity: 0.9;
        font-size: 16px;
        line-height: 2;
        margin-bottom: 24px;
        color: #FFFFFF;
      }

      .arco-btn {
        font-size: 14px;
        font-weight: bold;
        color: #3D3D3D;
      }
    }
  }
}
</style>